<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超级会员页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
        }

        .container {
            padding: 0px;
        }

        .header {
            background-color: #ff9900;
            padding: 50px 0;
            text-align: center;
        }

        .super-member {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .crown-icon {
            width: 30px;
            height: 30px;
            background: url('crown-icon.png') no-repeat center center;
            background-size: contain;
            margin-right: 10px;
        }

        .super-member span {
            font-size: 24px;
            color: #fff;
        }

        .reward-counter {
            font-size: 18px;
            color: #ff4949;
            margin-left: auto;
            position: relative;
            top: -60px;
        }

        .member-benefits {
            margin-top: 20px;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

        .benefit-item {
            display: flex;
            align-items: center;
            margin: 10px;
            background-color: #fff;
            padding: 10px;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .benefit-item img {
            width: 40px;
            height: 40px;
            margin-right: 10px;
        }

        .view-benefits-btn {
            margin-top: 20px;
            padding: 10px 20px;
            background-color: #ff6600;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .notice {
            margin-top: 20px;
            text-align: center;
            color: #999;
        }

        .sort-bar {
            margin-top: 20px;
            text-align: center;
            font-size: 16px;
        }

        .sort-bar a {
            color: #333;
            text-decoration: none;
            margin: 0 10px;
        }

        .banner {
            margin-top: 20px;
            text-align: center;
            background-color: #ffcc00;
            padding: 10px 0;
            color: #333;
        }

        .ltbox {
            position: absolute;
            left: 30px;
            top: 15px;
            font-size: 15px;
            color: #fff;
        }

        a {
            color: #fff;
            text-decoration: none;
        }

        .back {

            height: 17px;
            width: auto;
            position: absolute;
            top: 17px;
            left: 1em;
        }

        #textvip {
            color: #000;
            position: absolute;
            top: 50px;
            left: 30px;
            font: 20px"Helvetica Neue";
        }

        .kaquan {
            display: block;
            width: 150px;
            height: auto;
            position: absolute;
            top: 20px;
            left: 150px;
            z-index: 1;

            img {
                width: 100%;
                height: 100%;
            }
        }
    </style>

</head>

<body>
    <div class="container">
        <div class="header">
            <div class="super-member">

                <img src="images/back.png" class="back">
                <div class="ltbox"><a href="wode.html">返回</a></div>
                <div class="crown-icon"></div>
                <span id="textvip">超级会员</span>

                <div class="kaquan">
                    <img src="images/voucher.webp" alt="">
                    <div class="reward-counter"><strong>0</strong>元X<strong>0</strong>张</div>
                </div>
            </div>
        </div>
        <div class="member-benefits">
            <div class="benefit-item">
                <img src="images/vip-shengji.jpg" alt="升级红包">
                <span>升级红包</span>
            </div>
            <div class="benefit-item">
                <img src="images/vip-jialiang.jpg" alt="加量包">
                <span>加量红包</span>
            </div>
            <div class="benefit-item">
                <img src="images/vip-zhekou.jpg" alt="优惠红包">
                <span>优惠红包</span>
            </div>
            <div class="benefit-item">
                <img src="images/lisheng.png" alt="立省更多">
                <span>立省更多</span>
            </div>
            <button class="view-benefits-btn">立即查看</button>
        </div>
        <div class="notice">平台未开启活动</div>
        <div class="sort-bar">
            <span>综合排序：</span>
            <a href="#">分类</a> |
            <a href="#">速度</a> |
            <a href="#">全部筛选</a>
        </div>
        <div class="banner">
            <span>天天特价</span>
        </div>
    </div>
</body>

</html>